define(function(require) {

    'use strict';

    var Backbone = require('backbone'),
        $ = require('jquery'),
        Base = require('components/pop/base'),
        template = require('text!components/pop/templates/categorys.html'),
        cat = require('text!components/pop/templates/category.html'),
        catSingle = require('text!components/pop/templates/category_single.html');

    var Utils = require('core/utils');

    return Base.extend({

        template: _.template(template),

        className: 'popover right',

        events: {
            'click .category': 'clickCategory',
            'click .js-btn-cancel': 'hide',
            'click .js-btn-confirm': 'triggerCallback'
        },

        initialize: function(options) {
            Base.prototype.initialize.call(this, options);
            this.data = options.data || {};
            this.data.number = this.data.number || 5;
            this.data.business = this.data.business || [];

            this.initTpls();
            this.loadingCategory();
        },

        initTpls: function() {
            this.catTpl = _.template(cat);
            this.catSingleTpl = _.template(catSingle);
        },

        loadingCategory: function() {
            var view = this;
            var url = window._global.url.www + '/account/team/category.json';

            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'json'
            })
            .done(function(resp) {
                if(resp.code == 0) {
                    var cats = resp.data;
                    cats.forEach(function(cat) {
                        var html;
                        if(view.data.number == 1){
                            html = view.catSingleTpl(cat);
                        } else {
                            html = view.catTpl(cat);
                        }
                        
                        $('.category-cks').append(html);
                    });

                    view.$el.find('.category-cks').removeClass('loading');
                    view.setInitialValue(view.data);
                }
            });
        },

        setInitialValue: function(data){
            var business = data.business;
            $('input[name="category"]').filter(function(){
                var elem = this;
                return business.some(function(item){
                    return item.value == elem.value;
                });
            }).prop('checked', true);
        },

        render: function() {
            var view = this;
            view.$el.html(view.template(view.data));
            view.$el.find('.category-cks').addClass('loading');

            return view;
        },

        reset: function(obj) {
            var callback = obj.callback,
                target = obj.target,
                trigger = obj.trigger,
                data = obj.data;

            this.setCallback(callback);
            this.setTarget(target);
            this.setTrigger(trigger);
            this.setInitialValue(data);
            this.positioning();
            this.show();
        },

        positioning: function() {
            var view = this;

            view.$el.show().position({
                of: this.target,
                my: 'left center',
                at: 'right center',
                collision: 'none'
            });
        },

        clickCategory: function() {
            var number = this.data.number;
            if(number == 1){
                this.triggerCallback();
                return;
            }
            
            if($('input[name="category"]:checked').length > number - 1) {
                $('input[name="category').not(':checked').prop('disabled', true);
            } else {
                $('input[name="category').prop('disabled', false);
            }
        },

        triggerCallback: function() {
            var view = this;

            var cats = [];
            $('input[name="category"]:checked').each(function() {
                var o = {
                    text: $(this).parent().text(),
                    value: $(this).val(),
                }
                cats.push(o);
            });

            view.callback(cats);
            view.hide();
        }
    });
});
